<!--
 * @Author: Huangdong
 * @Date: 2022-04-21 09:56:55
 * @LastEditors: minsheng_insurance_agency_zhoucl
 * @LastEditTime: 2025-09-05 08:50:47
 * @FilePath: \02.bldinsure\src\views\form\components\TaxInfo.vue
 * @Description: 
 * 
 * 
-->
<template>
  <div class="shuoming-md">
    <div class="pop-Con">
      <h3>个人税收居民身份声明文件（{{ userLabel }}）</h3>
      <div class="user_infos">
        <span class="info_label">姓名：</span>
        <span class="info_value">{{ infoData.name }}</span>
      </div>
      <div class="user_infos">
        <span class="info_label">出生日期：</span>
        <span class="info_value">{{ infoData.birthDate }}</span>
      </div>
      <p class="shenming">本人声明:</p>
      <div>
        <van-radio-group v-model="fileInfo.crsIdType">
          <div
            class="pd5"
            v-for="(item, index) in crsIdTypeList"
            :key="`${item.keyId}-${index}`"
          >
            <van-radio
              :name="item.keyId"
              shape="square"
              checked-color="#f58484"
              icon-size="16px"
            >
              {{ `${index + 1}` + "." + item.text }}</van-radio
            >
          </div>
        </van-radio-group>
      </div>
      <p class="p-tip">如在以上选项中勾选第2项或者第3项，请输入下列信息：</p>
      <div class="tbr" v-show="fileInfo.crsIdType !== '0'">
        <div class="user_infos">
          姓：<input
            type="text"
            maxlength="30"
            placeholder="英文或拼音"
            @input="formatter('crsEnSurName')"
            @blur="formatter('crsEnSurName')"
            v-model="fileInfo.crsEnSurName"
          />
        </div>
        <div class="user_infos">
          名：<input
            type="text"
            maxlength="30"
            placeholder="英文或拼音"
            @input="formatter('crsEnName')"
            @blur="formatter('crsEnName')"
            v-model="fileInfo.crsEnName"
          />
        </div>
        <!-- <van-field
          v-model="fileInfo.crsEnSurName"
          label="姓"
          maxlength="30"
          placeholder="英文或拼音"
          :formatter="formatter"
        />
        <van-field
          v-model="fileInfo.crsEnName"
          label="名"
          maxlength="30"
          placeholder="英文或拼音"
          :formatter="formatter"
        /> -->
        <br />
        现居地址(中文):(必填)<br /><input
          type="text"
          placeholder="(国家) (省) (市)"
          @input="formatRule('homeAddressCHN')"
          @blur="formatRule('homeAddressCHN')"
          v-model="fileInfo.homeAddressCHN"
        />
        <br />
        (英文或拼音):<br /><input
          type="text"
          placeholder="(国家) (省) (市)"
          v-model="fileInfo.homeAddressEN"
        />
        <br />
        出生地址(中文):(必填)<br /><input
          type="text"
          placeholder="(国家) (省) (市)"
          @input="formatRule('placeOfBirthCHN')"
          @blur="formatRule('placeOfBirthCHN')"
          v-model="fileInfo.placeOfBirthCHN"
        />
        <br />
        (英文或拼音):<br /><input
          type="text"
          placeholder="(国家) (省) (市)"
          v-model="fileInfo.placeOfBirthEN"
        />
        <br />
        <br />
        税收居民国（地区）及纳税人识别号：<br />
        1.<input
          type="text"
          name="taxcountyandnos"
          v-model="fileInfo.taxCountyAndNos"
          @input="formatRule('taxCountyAndNos')"
          @blur="formatRule('taxCountyAndNos')"
          style="width: 90%"
        /><br />
        2.<input
          type="text"
          placeholder="(如有)"
          v-model="fileInfo.taxNum2"
          @input="formatRule('taxNum2')"
          @blur="formatRule('taxNum2')"
          class="input-wd"
          style="width: 90%"
        /><br />
        3.<input
          type="text"
          placeholder="(如有)"
          @input="formatRule('taxNum3')"
          @blur="formatRule('taxNum3')"
          v-model="fileInfo.taxNum3"
          style="width: 90%"
        /><br /><br />
        <div v-show="fileInfo.taxCountyAndNos === ''">
          如不能提供居民国(地区)纳税人识别号，请选择原因：<br />
          <van-radio-group v-model="fileInfo.noTaxNoReason">
            <van-radio name="1" checked-color="#f58484" icon-size="14px"
              >居民国(地区)不发放纳税人识别号
            </van-radio>
            <van-radio name="2" checked-color="#f58484" icon-size="14px">
              账户持有人未能取得纳税人识别号，如选此项，请解释具体原因:</van-radio
            >
          </van-radio-group>
          <input
            type="text"
            v-model="fileInfo.noTaxNoReasonDetail"
            v-show="fileInfo.noTaxNoReason !== '1'"
            @input="formatRule('noTaxNoReasonDetail')"
            @blur="formatRule('noTaxNoReasonDetail')"
            style="width: 90%"
          />
        </div>
        <br />
      </div>
      <p class="tip-msg">
        本人确认上述信息的真实、准确和完整，且当这些信息发生变更时，将在30日内通知贵机构，否则本人承担由此造成的不利后果。
      </p>
      <br />
      <div class="btns">
        <van-button class="mui-btn1" block @click="handleBtn('2')"
          >取消</van-button
        >
        <van-button class="mui-btn1" block type="danger" @click="handleBtn('1')"
          >确认</van-button
        >
      </div>

      <div>
        说明：
        <br /><br />1.
        本表所称中国税收居民是指在中国境内有住所，或者无住所而在境内居住满183天的个人。在中国境内有住所是指因户籍、家庭、经济利益关系而在中国境内习惯性居住。临时离境的，不扣减日数。临时离境，是指在一个纳税年度中一次不超过30日或者多次累计不超过90日的离境。
        <br /><br />2.
        本表所称非居民是指中国税收居民以外的个人。其他国家（地区）税收居民身份认定规则及纳税人识别号相关信息请参见国家税务总局网站（http://www.chinatax.gov.cn/aeoi_index.html）。
        <br /><br />3. 军人、武装警察无需填写此声明文件。
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  name: "TaxInfo",
  props: {
    uType: {
      type: String,
      default: "tbr",
    },
    fileInfo: {
      type: Object,
    },
    infoData: {
      type: Object,
    },
  },
  data() {
    return {
      logoUrl: "",
    };
  },
  computed: {
    ...mapGetters({
      crsIdTypeList: "dictionary/crsIdTypeList",
      crsTaxPlace: "dictionary/crsTaxPlace",
      country: "dictionary/nationList",
    }),
    userLabel() {
      let res = "投保人";
      if (this.uType == "bbr") {
        res = "被保险人";
      }
      return res;
    },
  },
  created() {},
  methods: {
    formatter(type) {
      // 过滤输入非字母和空格
      this.fileInfo[type] = this.fileInfo[type].replace(
        /^((?![ A-Za-z]).)*$/g,
        ""
      );
    },
    formatRule(type) {
      this.fileInfo[type] = this.fileInfo[type].replace(/\s+/g, "");
    },
    handleBtn(type) {
      let res = {
        status: true,
        msg: "",
      };
      if (this.fileInfo.crsIdType === "") {
        res.status = false;
        res.msg = "请选择税收居民类型";
      } else if (
        this.fileInfo.crsIdType === "1" ||
        this.fileInfo.crsIdType === "2"
      ) {
        if (this.fileInfo.homeAddressCHN === "") {
          res.status = false;
          res.msg = "请输入投保人现居地址(中文)";
        } else if (this.fileInfo.placeOfBirthCHN === "") {
          res.status = false;
          res.msg = "请输入投保人出生地址(中文)";
        } else if (
          this.fileInfo.taxCountyAndNos === "" &&
          this.fileInfo.taxNum2 === "" &&
          this.fileInfo.taxNum3 === ""
        ) {
          if (this.fileInfo.noTaxNoReason === "") {
            res.status = false;
            res.msg = "请输入纳税人识别号,或选择不能提供识别号原因";
          } else if (
            this.fileInfo.noTaxNoReason === "reason2" &&
            this.fileInfo.noTaxNoReasonDetail === ""
          ) {
            res.status = false;
            res.msg = "请输入纳税人识别号,或选择不能提供识别号原因";
          }
        }
      }
      if (!res.status) return this.$msAlert(res.msg);
      if (type === "1") {
        const findVal2 = this.crsIdTypeList.find(
          (ele) => ele.keyId === this.fileInfo.crsIdType
        );
        this.fileInfo.crsIdTypeName = findVal2.text;
        this.$emit("handleFile", this.fileInfo, this.uType);
      } else {
        this.$emit("handleFile", false);
      }
    },
  },
};
</script>

<style lang="less" scoped>
.shenming {
  line-height: 1.5;
  margin-top: 12px;
}

.shuoming-md {
  padding: 15px;

  .pop-Con {
    .btns {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin: 30px 0;

      .mui-btn1 {
        margin: 0 15px;
      }
    }

    h3 {
      font-size: 18px;
      text-align: center;
      line-height: 1.5;
    }
  }
}
.p-tip {
  line-height: 1.5;
  margin: 6px 0;
}
.user_infos {
  display: flex;
  align-items: center;
  height: 20px;
  margin-top: 12px;
  .info_label {
    width: 70px;
    color: #747474;
  }
  .info_value {
    width: 100px;
    height: 19px;
    border-bottom: 1px solid #b7b7b7;
  }
}
input {
  width: 100%;
  height: 30px;
  line-height: 30px;
  outline: none;
  padding: 0 15px;
  border: none;
  // border-radius: 3px;
  border-bottom: 1px solid #b7b7b7;
}
</style>
